/* сделай кнопку с позиции дисайблед */
import styles from './register.module.scss';
import Button from '../../components/button/button';
import { Link } from 'react-router-dom';
import { FieldValues, useForm, SubmitHandler } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';

export const Register = () => {

	interface IInputs {
	email: string,
	password: string,
	fullName: string
}
	const {
		register,
		handleSubmit,
		control,
		formState: { errors }
	} = useForm<IInputs>({mode: 'onBlur'});
	const onSubmit: SubmitHandler<IInputs> = (data) => console.log(data);
	console.log(errors);
	return (
		<div>
			{/* {error && <p style={{ color: 'red' }}>{error}</p>} */}
			<h2>Регистрация</h2>
			<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
				<div className={styles.input}>
					<label htmlFor="email">Ваш email*</label>
					<input
						id="email"
						{...register('email', {
							required: 'Обязательное поле',
							validate: {
								isEmail: value => /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i.test(value) || 'Введите корректный ящик'
							}
						})}
						type="text"
						className={styles.inputItem}
					/>
					{errors.email?.message && <p style={{ color: 'red' }}>{errors.email?.message}</p>}
				</div>
				<div className={styles.input}>
					<label htmlFor="password">Ваш пароль*</label>
					<input
						id="password"
						{...register('password', {
							required: 'Обязательное поле',
							validate: {
								number: value => /\d/.test(value) || 'Пароль должен содержать хотя бы одну цифру!',
								letter: value => /[A-Za-z]/.test(value) || 'Пароль должен содержать хотя бы одну букву!',
								upperLetter: value => /[A-Z]/.test(value) || 'Пароль должен содержать одну заглавную букву!'
							}
						})}
						type="password"
						className={styles.inputItem}
					/>
					{errors.password?.message && <p style={{ color: 'red' }}>{errors.password?.message}</p>}
				</div>
				<div className={styles.input}>
					<label htmlFor="fullName">Ваше имя*</label>
					<input
						id="fullName"
						{...register('fullName', {
							required: 'Обязательное поле'
						})}
						type="text"
						className={styles.inputItem}
					/>
					{errors.fullName?.message && <p style={{ color: 'red' }}>{errors.fullName?.message}</p>}
				</div>
				<Button appearance="big">Зарегистрироваться</Button>
			</form>
			<DevTool control={control} />
			<div className={styles.navigation}>
				<div>
          Есть аккаунт?{' '}
					<Link
						style={{ color: '#ffa600' }}
						className={styles.href}
						to="/auth/login"
					>
            Войти
					</Link>
				</div>
				<div>
					<Link style={{ color: '#ffa600' }} className={styles.href} to="/">
            На главную
					</Link>
				</div>
			</div>
		</div>
	);
};
